<template>

  <view class="top" @tap="goInfo()">
    <view class="top_bg">
      <image src="https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/header.png" mode="aspectFill" />

    </view>
    <view class="top_box">
      <view class="top_box_info">
        <view class="top_box_info_picdiv">
          <view style="height: 100rpx;">

            <image :src="info.avatarUrl" class="top_box_info_picdiv_pic" :style="'border-color: var(--lv'+assets.grade+')'" />

            <view class="top_box_info_picdiv_level " :style="'background-color: var(--lv'+assets.grade+')'">

              LV{{assets.grade}}
            </view>
          </view>
          <view class="top_box_info_name">
            <view class="top_box_info_name_text" :style="'color: var(--lv'+assets.grade+')'">
              {{info.nickname}}
              <text class="top_box_info_name_loc">{{info.province+info.city+info.district}}</text>

            </view>
            <view class="top_box_info_name_date">
              初次打卡：{{assets.firstCheckInTime?assets.firstCheckInTime:"还未打卡"}}

            </view>

          </view>
        </view>

        <view class="top_box_info_logo">

          <image :src="top_box_logo" style="height: 90rpx;width: 90rpx;" />
        </view>

      </view>
      <view class="top_box_number">
        <view class="top_box_number_div">
          打卡次数：{{assets.checkInCount}}
        </view>
        <view class="top_box_number_div">
          血包能量：{{assets.bloodBags}}cc
        </view>
        <view class="top_box_number_div">
          <!-- 待兑换：{{assets.pendingGifts}} -->
          漂流瓶次数：{{assets.pendingDriftBottles}}
        </view>
      </view>
    </view>












  </view>
</template>

<script>
  import {
    getAssetsInfo,
    getUserInfo,
  } from "@/api/home.js"
  import {
    timeTransfer
  } from "@/utils/utils.js"

  export default {
    name: "top",
    data() {
      return {
        needRefresh: false,
        info: {
          avatarUrl: "",
          grade: "",
          gender: "",
          nickname: ""
        },
        assets: {
          grade:0
        },
       
    
        portrait: "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo.PNG",
        top_box_logo: "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo_with_name.PNG",
      };
    },

    mounted() {
      this.getTopInfo();
      console.log("topOnload");
      // 监听事件  
      uni.$on('needRefresh', (param) => {
        this.getTopInfo();
      })
      
    },
    methods: {
      getTopInfo() {

        getUserInfo().then(res => {
          this.info = res.data.data;

          wx.setStorageSync('shenai_userInfo', this.info);
          getAssetsInfo().then(res => {
            console.log("getAssetsInfo", res)
            this.assets = res.data.data;

            this.assets.firstCheckInTime = timeTransfer(this.assets.firstCheckInTime)

            wx.setStorageSync('shenai_userAssetsInfo', this.assets);
            uni.$emit('refreshUserinfo', true);
          });
        });

      },
      goInfo() {
        uni.navigateTo({
          url: "/subpkg-home/info/info",

        })
      },
      change() {}

    }
  }
</script>

<style lang="scss">
  .top_bg {
    height: 20vh;
    // background-color: #cb4f20;
    width: 100vw;

    image {
      height: 100%;
      width: 100%;

    }

    /* position: absolute; */
  }

  .top_box {
    height: 180rpx;
    width: 620rpx;
    position: absolute;
    padding: 30rpx;
    top: 150rpx;
    z-index: 9;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 12rpx;
    background-color: white;
    box-shadow: 2rpx 2rpx 10rpx #999999;
  }

  .top_box_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
  }

  .top_box_info_picdiv {
    position: relative;
    display: flex;
  }



  .top_box_info_picdiv_pic {
    height: 90rpx;
    width: 90rpx;
    border-radius: 50%;
    border: 2rpx solid;

  }

  .top_box_info_picdiv_level {
    background-color: #ff7f6a;


    width: 80rpx;
    height: 27rpx;
    margin-top: -25rpx;
    border-radius: 15rpx;
    position: relative;
    font-size: 20rpx;
    color: white;
    text-align: center;
    left: 8rpx;
    top: 0px;

  }

  .top_box_info_name {
    margin-left: 30rpx;
    margin-top: 10rpx;
  }

  .top_box_info_name_text {
    font-weight: bold;
  }

  .top_box_info_name_loc {
    margin-left: 30rpx;
    font-size: 20rpx;
    color: #999999;
  }

  .top_box_info_name_date {
    margin-top: 10rpx;
    font-size: 25rpx;
    color: #999999;
  }

  .top_box_number {
    border-style: dashed hidden hidden hidden;
    border-color: #d3d3d3;
    border-width: 1rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    height: 85rpx;


  }

  .top_box_number_div {
    font-size: 28rpx;
    color: #999999;
    // padding: 20rpx;
  }

  .info_box {
    width: 620rpx;
    margin-top: 20rpx;
  }

  .pop_info {

    font-size: 25rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;


  }
</style>